<template>
  <div class="edit-container">

    <el-steps :active="tableData.activeIndex" finish-status="success" align-center>

      <el-step
        v-for="(step, index) in steps"
        :key="index"
        :title="step.title"
        @click.native="handleClick(index)"
        :class="{ 'is-success': step.completed }"

      ></el-step>
    </el-steps>

    <div v-if="activePageIndex === 0" style="margin: 100px 0; text-align: center;">
      <span style="font-size: 20px; color: #67C23A;">人社局审核已通过！</span>
    </div>

    <div v-if="activePageIndex=== 1" style="margin: 40px 120px">
      <el-descriptions :column="3" border direction="vertical">
        <el-descriptions-item labelStyle="font-weight: bold" label="姓名">{{ tableData.personalInformationModel.name }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="性别">
          {{ tableData.personalInformationModel.sex === 1? '男' : '女' }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="⼿机号">{{ tableData.personalInformationModel.phone }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="身份证号">
          {{ tableData.personalInformationModel.idCards }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="银行账号">
          {{ tableData.personalInformationModel.bankNum }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="银行名称">{{
            tableData.personalInformationModel.bank
          }}
        </el-descriptions-item>
      </el-descriptions>
      <el-form v-loading="saveLoading" ref="form" :model="form" :rules="rules" label-width="150px">

        <el-form-item label="银行审核：" prop="subsidyState"  style="margin-top: 20px">
          <el-select
            v-model="form.subsidyApplicationDetailsModel.subsidyState"
            placeholder="请选择"
            :disabled="false"
          >
            <el-option
              v-for="item in subsidyStateList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="拒绝原因：" prop="reason" v-if="form.subsidyApplicationDetailsModel.subsidyState=== 4 ">
          <el-input v-model="form.subsidyApplicationDetailsModel.reason" maxlength="150" placeholder="拒绝原因"
                    type="textarea" :rows="3"/>
        </el-form-item>

          <div style="margin-top: 20px; display: flex; justify-content: flex-end;"
               v-if="tableData.subsidyApplicationDetailsModel.subsidyState !== 5 ">

            <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary" @click="submitBankStatus()">保存</el-button>
            <el-button @click="close">取消</el-button>
          </div>
      </el-form>
    </div>

    <div v-if="activePageIndex=== 2" style="margin: 40px 120px">
      <el-form v-loading="saveLoading" ref="form" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="补助的申领状态：" prop="subsidyApplicationModel.applicationState" style="margin-top: 20px">
          <el-select v-model="form.subsidyApplicationModel.applicationState"
                     placeholder="请选择"
                     :disabled="false">
            <el-option
              v-for="item in applicationStates"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="经办人：" prop="subsidyApplicationModel.operator" v-if="form.subsidyApplicationModel.applicationState === 3">
          <el-input v-model="form.subsidyApplicationModel.operator" maxlength="150"  placeholder="经办人" />
        </el-form-item>

        <el-form-item label="经办时间：" prop="subsidyApplicationModel.processingTime" v-if="form.subsidyApplicationModel.applicationState === 3">
          <el-date-picker
            v-model="form.subsidyApplicationModel.processingTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <div style="margin-top: 20px; display: flex; justify-content: flex-end;" v-if="tableData.subsidyApplicationModel.applicationState!== 3">
          <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary" @click="handlerSubmit()">保存</el-button>
          <el-button @click="close">取消</el-button>
        </div>

      </el-form>
    </div>

    <div v-if="activePageIndex=== 3" style="margin: 80px 100px">
      <el-alert type="success" title="补助申领已发放" show-icon>
        <p>补助申领已发放,请查收!</p>
      </el-alert>
    </div>

  </div>
</template>
<script>


import {
  getBySubsidyApplicationId, subsidyApplicationDetailStatus, updateListDateStatus
} from "@/api/subsidyApplication";

export default {
  components: {},
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return {rules: []}
      }
    },
  },
  data() {
    return {
      steps: [
        { title: '人社局审核', completed: false },
        { title: '银行账户信息审核', completed: false },
        { title: '补助发放', completed: false }
      ],
      activePageIndex: 0, // 当前显示的页面索引

      tableData: {
        enterpriseInformationModel: [], personalInformationModel: [],subsidyApplicationModel: [], subsidyApplicationDetailsModel: [],
        activeIndex: 0
      },
      form: {
        id: null,
        state: '',


        subsidyApplicationDetailsModel: {
          subsidyState: '',
          reason: '',
        },
        subsidyApplicationModel: {
          applicationState: '',
          operator: '',
          processingTime: '',
        },

        personalInformationModel: {
          state: '',
          reason: '',
        },
        enterpriseInformationModel: {
          state: '',
          reason: '',
        },

      },
      rules: {
        'subsidyApplicationModel.operator': [{required: true, message: '请填写经办人', trigger: ['blur']}],
        'subsidyApplicationModel.processingTime': [{required: true, message: '请选择经办时间', trigger: ['blur']}],
      },
      saveLoading: false,
      subsidyStateList: [{id: 5, name: "审核通过"}, {id: 4, name: "审核不通过"},{id: 2, name: "待审核", disabled: true}],
      applicationStates: [{id: 2, name: "待发放",disabled: true}, {id: 3, name: "已发放"}],
    }
  },

  mounted() {
    this.getDetail();
  },

  methods: {

    handleClick(index) {
      if(this.tableData.subsidyApplicationDetailsModel.subsidyState === 5 || this.tableData.subsidyApplicationModel.applicationState === 3){
        this.steps[index].completed = true; // 更新步骤状态
        if (this.steps[index].completed) {
          this.activePageIndex = index;  // 更新激活的步骤
        }
      }else if(index===0){
        this.activePageIndex = index;

      }
    },

    getActivePageIndex(){
      this.activePageIndex = this.tableData.activeIndex;
    },

    //获取列表
    getDetail() {
      this.saveLoading = true

      getBySubsidyApplicationId({
        subsidyApplicationId: this.editData.id

      }).then((res) => {
        this.tableData = res
        this.form.personalInformationModel = res.personalInformationModel
        this.form.enterpriseInformationModel = res.enterpriseInformationModel
        if (res.subsidyApplicationDetailsModel.subsidyState === 5 ) {

          this.form.subsidyApplicationDetailsModel = res.subsidyApplicationDetailsModel
          if (res.subsidyApplicationModel.applicationState === 3) {
            this.form.subsidyApplicationModel = res.subsidyApplicationModel
          }
        }
        this.getActivePageIndex();
      }).finally(() => {
        this.saveLoading = false;
      })
    },


    submitBankStatus() {
      this.$refs.form.validate(valid => {
        if (!valid) return;
        this.saveLoading = true;
        if (!this.form.subsidyApplicationDetailsModel.subsidyState){
          this.$message.error('请选择审核状态');
          this.saveLoading = false;
          return;
        }
        const type = this.form.subsidyApplicationDetailsModel.subsidyState;
        const reason = this.form.subsidyApplicationDetailsModel.reason;
        const subsidyApplicationDetailId = this.tableData.subsidyApplicationDetailsModel.id;
        subsidyApplicationDetailStatus({
          type: type,
          reason: reason,
          subsidyApplicationDetailId: subsidyApplicationDetailId
        }).then(() => {
          this.$message.success('保存成功');
          if (this.form.subsidyApplicationDetailsModel.subsidyState === 4) {
            this.close();
          }
          this.getDetail();

        }).finally(() => {
          this.saveLoading = false
        })

      })
    },
    handlerSubmit() {

      this.$refs.form.validate(valid=>{
        if(!valid)return;
        this.saveLoading = true;
        if (!this.form.subsidyApplicationModel.applicationState){
          this.$message.error('请选择补助的申领状态');
          this.saveLoading = false;
          return;
        }
        updateListDateStatus({
          subsidyApplicationId: this.editData.id,
          operator: this.form.subsidyApplicationModel.operator,processingTime: this.form.subsidyApplicationModel.processingTime})
          .then(() => {
          this.$message.success('保存成功');
          this.getDetail();
          this.close();
        }).finally(() => {
          this.saveLoading = false
        })
      })

    },

    close() {
      this.$emit('hideExamineDialog')
    },
  }
}
</script>
